<template>
  <!-- <div class="right"> -->
  <div
    ref="all"
    :class="['right-item',{change:isShow}]"
    @click="change"
  >
    <div class="title">
      <div class="title-top">
        {{ order.restaurant.name['zh-CN'] }}
      </div>
      <div class="title-time">
        {{ order.createdAt | formatTime }}
      </div>
    </div>
    <div class="order">
      <div class="order-item">
        <div
          v-for="(k,v) in list"
          :key="v"
        >
          <div class="order-order">
            <div class="order-food">
              {{ k[0].name['zh-CN'] }}
            </div>
            <div class="order-count">
              {{ k.length }}
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div>
          <img
            class="img"
            src="@/assets/tasty.png"
            alt=""
          >
        </div>
        <div class="bottom-top">
          <div>总价：</div>
          <div>{{ total | rmb }}</div>
        </div>
        <button
          class="more"
          @click="change"
        >
          更多
        </button>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
const _ = require('lodash');

export default {
  props: {
    order: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      isShow: false,
    };
  },
  computed: {
    list() {
      return _.groupBy(this.order.cart, '_id');
    },
    total() {
      let sum = 0;
      _.forEach(this.order.cart, (item) => {
        sum += item.price;
      });
      return sum;
    },
  },
  methods: {
    change(e) {
      console.log(e.target);
      if (!this.$refs.all.contains(e.target)) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.img {
    width: 30px;
    height: 30px;
    display: none;
}

.right-item {
  width: 140px;
  height: 250px;
  margin:0 0 25px 90px;
  border: 1px solid grey;
}

.change {
  transform-origin:top;
  transform: scale(1.2);
  margin-bottom: 100px;
  transition: 1s;
}

.title {
  height: 55px;
  width: 120px;
  border-bottom: 1px solid gray;
  margin: 0 auto;
}
.title-top {
  font-size: 20px;
  font-weight: 900;
  padding: 5px 0;
}

.title-time {
  color: gray;
  font-size: 12px;
}

.order {
  height: 180px;
  margin: 0 auto;
  width: 120px;
}

.order-item {
  height: 110px;
  font-size: 12px;
  text-align: left;
  overflow: auto;
  border-bottom: 1px solid gray;
}

.order-order {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}

.order-count {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 20px;
  background-color:rgba($color: gray, $alpha: 0.4);
}

.more {
  width: 40px;
  height: 20px;
  font-size: 12px;
  border-radius: 35%;
  background-color: black;
  text-align: center;
  color: white;
  margin: 5px auto;
  cursor : pointer
}

.bottom-top {
  height: 30px;
  width: 120px;
  padding: 5px 0;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
}
</style>
